<template>
  <div class="odds-item" @click="selectBtn" :class="data['color']">
    <span class="number">{{ data.number }}</span>
    <span class="odds">{{ data.odds }}</span>
  </div>
</template>

<script>
export default {
  props: {
    itemStyle: {
      type: Object,
      default: () => {
        return {
          background: 'linear-gradient(180deg, #FFFFFF 0%, #FBEBEB 100%)',
          border: '1px solid #FACACA',
        }
      },
    },
    numberStyle: {
      type: Object,
      default: () => {
        return { color: '#5E6994', fontSize: '14px' }
      },
    },
    oddsStyle: {
      type: Object,
      default: () => {
        return { color: '#7B85A6', fontSize: '11px' }
      },
    },
    data: {
      number: '',
      odds: null,
    },
  },
  data() {
    return {}
  },
  methods: {
    selectBtn() {
      this.$emit('selectOdds')
    },
  },
}
</script>

<style scoped lang="less">
.odds-item {
  height: 32px;
  width: 66px;
  min-width: 66px;
  border-radius: 5px;
  margin-right: 5px;
  margin-top: 6px;
  background: linear-gradient(180deg, #333950 0%, #24253d 100%);
  color: #7b85a6;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 500;

  &:nth-child(4n) {
    margin-right: 0;
  }
  .number {
    height: 18px;
    color: #7A90DE;
    line-height: 18px;
  }
  .odds {
    height: 14px;
    line-height: 14px;
    color: #777887;
    font-size: 11px;
  }
  &.selected {
    background: linear-gradient(354.48deg, #3d35c6 4.34%, #6c4fe0 95.73%);
    &.red {
      background: linear-gradient(180deg, #ef434d 0%, #aa1f30 100%);
    }
    &.blue {
      background: linear-gradient(180deg, #38acff 0%, #0169d9 100%);
    }
    &.green {
      background: linear-gradient(180deg, #40ce3d 0%, #269753 100%);
    }
    .number {
      color: #fff;
    }

    .odds {
      color: #fff;
    }
  }
}
.red .number {
  color: #9e4b4b;
}
.green .number {
  color: #4b9e67;
}
.blue .number {
  color: #4b679e;
}
</style>
